<template>
  <view class="hospital-selector-test">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">医院科室部门项目组选择器测试</text>
    </view>

    <!-- 测试按钮 -->
    <view class="test-section">
      <nut-button 
        type="primary" 
        class="test-btn"
        @click="showSelector"
      >
        打开选择器
      </nut-button>
    </view>

    <!-- 选择结果展示 -->
    <view class="result-section" v-if="hasSelection">
      <view class="result-title">选择结果：</view>
      <view class="result-content">
        <view v-if="selectionResult.hospital" class="result-item">
          <text class="result-label">医院：</text>
          <text class="result-value">{{ selectionResult.hospital.title }}</text>
        </view>
        <view v-if="selectionResult.team" class="result-item">
          <text class="result-label">部门：</text>
          <text class="result-value">{{ selectionResult.team.title || selectionResult.team.name }}</text>
        </view>
        <view v-if="selectionResult.department" class="result-item">
          <text class="result-label">科室：</text>
          <text class="result-value">{{ selectionResult.department.title || selectionResult.department.name }}</text>
        </view>
        <view v-if="selectionResult.project" class="result-item">
          <text class="result-label">项目组：</text>
          <text class="result-value">{{ selectionResult.project.title || selectionResult.project.name }}</text>
        </view>
      </view>
    </view>

    <!-- 功能说明 -->
    <view class="description-section">
      <view class="description-title">功能说明：</view>
      <view class="description-content">
        <text class="description-text">1. 点击"打开选择器"按钮测试选择器功能</text>
        <text class="description-text">2. 选择器包含4个步骤：医院 → 部门 → 科室 → 项目组</text>
        <text class="description-text">3. 支持上一步/下一步导航</text>
        <text class="description-text">4. 最后一步显示"确定"按钮</text>
        <text class="description-text">5. 顶部显示步骤条和已选择项目</text>
      </view>
    </view>

    <!-- 选择器组件 -->
    <HospitalDepartmentProjectSelector
      :visible="selectorVisible"
      @update:visible="selectorVisible = $event"
      @close="handleClose"
      @confirm="handleConfirm"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import HospitalDepartmentProjectSelector from '@/components/HospitalDepartmentProjectSelector.vue'

// 选择器显示状态
const selectorVisible = ref(false)

// 选择结果
const selectionResult = ref({
  hospital: null as any,
  department: null as any,
  team: null as any,
  project: null as any
})

// 计算属性：是否有选择结果
const hasSelection = computed(() => {
  return selectionResult.value.hospital || 
         selectionResult.value.department || 
         selectionResult.value.team || 
         selectionResult.value.project
})

/**
 * 显示选择器
 */
const showSelector = () => {
  selectorVisible.value = true
}

/**
 * 处理选择器关闭
 */
const handleClose = () => {
  console.log('选择器关闭')
}

/**
 * 处理选择确认
 */
const handleConfirm = (data: any) => {
  console.log('选择确认:', data)
  selectionResult.value = data
  selectorVisible.value = false
}
</script>

<style scoped lang="scss">
.hospital-selector-test {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 32rpx;
  
  .page-header {
    text-align: center;
    margin-bottom: 48rpx;
    
    .page-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .test-section {
    margin-bottom: 48rpx;
    
    .test-btn {
      width: 100%;
      height: 88rpx;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  
  .result-section {
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
    margin-bottom: 48rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .result-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 24rpx;
    }
    
    .result-content {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      
      .result-item {
        display: flex;
        align-items: center;
        padding: 16rpx;
        background: #f0f9ff;
        border-radius: 8rpx;
        border-left: 4rpx solid #3b82f6;
        
        .result-label {
          font-size: 28rpx;
          color: #0369a1;
          font-weight: 500;
          margin-right: 16rpx;
        }
        
        .result-value {
          font-size: 28rpx;
          color: #0c4a6e;
          font-weight: 600;
        }
      }
    }
  }
  
  .description-section {
    background: white;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    
    .description-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 24rpx;
    }
    
    .description-content {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      
      .description-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        padding-left: 16rpx;
        position: relative;
        
        &::before {
          content: '•';
          position: absolute;
          left: 0;
          color: #3b82f6;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
